<template>
  <div class="user-card">
    <!-- 用户信息部分 -->
    <div class="user-info relative">
      <div class="user-avatar">
        <div class="avatar-placeholder">{{ userInfo?.username?.charAt(0) || 'U' }}</div>
      </div>
      <div class="user-details">
        <div class="flex items-center gap-2">
          <div class="username">{{ userInfo?.username || '用户名' }}</div>
        </div>
        <div class="user-email">{{ userInfo?.email || '暂未绑定邮箱' }}</div>
        <!-- 会员等级和到期时间 -->
        <div class="member-info mt-1.5">
          <div v-if="userInfo?.role === 'NORMAL'" class="text-xs text-gray-500">免费会员</div>
          <div v-else-if="userInfo?.role === 'VIP'" class="text-xs text-yellow-500 font-medium">
            VIP会员
            <span v-if="userInfo?.vipEndTime" class="text-gray-400 font-normal ml-1"> 至 {{ formatDate(userInfo.vipEndTime) }} </span>
          </div>
          <div v-else-if="userInfo?.role === 'SVIP'" class="text-xs text-red-500 font-medium">
            SVIP会员
            <span v-if="userInfo?.vipEndTime" class="text-gray-400 font-normal ml-1"> 至 {{ formatDate(userInfo.vipEndTime) }} </span>
          </div>
        </div>
      </div>
      <div class="absolute right-0 top-0 flex items-center gap-1">
        <img class="w-4 h-4" src="@/assets/image/energy-icon.svg" alt="能量值" />
      </div>
    </div>

    <!-- 分割线 -->
    <div class="divider"></div>

    <!-- 菜单项 -->
    <div class="menu-items">
      <div class="menu-item" @click="navigateTo('/card-redeem')">
        <div class="item-icon profile-icon mt-1">
          <img src="@/assets/image/member-center-icon.svg" alt="会员中心" />
        </div>
        <span>会员中心</span>
      </div>

      <div class="menu-item" @click="navigateTo('/card-exchange')">
        <div class="item-icon profile-icon">
          <img src="@/assets/image/card-redeem-icon.svg" alt="充值卡密" />
        </div>
        <span>充值卡密</span>
      </div>

      <div class="menu-item" @click="navigateTo('/feedback')">
        <div class="item-icon feedback-icon">
          <img src="@/assets/image/feedback-icon.svg" alt="意见反馈" />
        </div>
        <span>意见反馈</span>
      </div>

      <div class="menu-item" @click="onHandleLogout">
        <div class="item-icon logout-icon">
          <img src="@/assets/image/logout.svg" alt="退出登录" />
        </div>
        <span>退出登录</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const userStore = useUserStore();
const { userInfo } = toRefs(userStore);

const goToUserProfile = () => {
  // 未来可以导航到用户资料页面
  // router.push('/profile');
};

const onHandleLogout = () => {
  userStore.onLogout();
  router.push('/login');
};

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  });
};
</script>

<style scoped>
.user-card {
  width: 16rem;
  /* 核心毛玻璃效果: 调整了背景颜色和透明度，使其更明亮 */
  background: rgba(50, 50, 80, 0.9);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2); /* 提亮边框，增加通透感 */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* 柔化阴影 */
  overflow: hidden;
  padding: 1rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative; /* 确保用户信息在最上层，避免被背景遮挡 */
}

.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #eab308 0%, #f97316 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0; /* 防止头像在flex布局中被压缩 */
}

.avatar-placeholder {
  text-transform: uppercase;
}

.user-details {
  display: flex;
  flex-direction: column;
}

/* 统一调整文字颜色以适应深色背景 */
.username {
  font-weight: 600;
  font-size: 1rem;
  color: white;
}

.user-email {
  font-size: 0.8rem;
  color: var(--text-light, #a0aec0);
  margin-top: 0.25rem;
}

/* 调整会员状态文字颜色，使其在深色背景下更清晰 */
.member-info .text-xs {
  color: var(--text-light, #a0aec0) !important;
}
.member-info .text-yellow-500 {
  color: #fbbf24 !important; /* 更亮的黄色 */
}
.member-info .text-red-500 {
  color: #ef4444 !important; /* 更亮的红色 */
}
.member-info .text-gray-400 {
  color: #9ca3af !important;
}

/* 调整右上角能量值颜色 */
.absolute.right-0.top-0 {
  color: white;
}
.absolute.right-0.top-0 img {
  filter: brightness(0) invert(1); /* 将图标变为白色 */
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
  border: 0;
  margin: 0.75rem 0;
}

.menu-items {
  display: flex;
  flex-direction: column;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.2); /* 提亮悬停效果 */
}

.item-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 将所有菜单图标变为白色 */
.menu-item img {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) invert(1);
}

.menu-item span {
  font-size: 0.9rem;
  color: white;
}
</style>
